/* 头部 */
.header {
  margin-right: -250rpx;
  width: 500rpx;
  height: 120rpx;
  position: absolute;
  top: 100rpx;
  right: 50%;
  z-index: 15;
}

.header>image {
  display: block;
  width: 100%;
  height: 100%;
}


/* 签筒 */
.plank-bucket {
  width: 450rpx;
  height: 600rpx;
  position: absolute;
  left: 150rpx;
  bottom: 230rpx;
  z-index: 10;

}

/* 抽签晃动 */
.divince-animation {
  animation-delay: 0s;
  animation-duration: .3s;
  animation-iteration-count: infinite;
  animation-name: animation-wobble;
  animation-play-state: running;
  animation-timing-function: ease-in;
}

@keyframes animation-wobble {
  0% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(-12.5%, 0, 0) rotate3d(0, 0, 1, -12.5deg);
  }

  50% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0);
  }

  75% {
    transform: translate3d(12.5%, 0, 0) rotate3d(0, 0, 1, 12.5deg);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* 签筒默认动画 */
.divince-animation-base {
  animation-delay: 0s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: scale-in-out-center;
  animation-play-state: running;
  animation-timing-function: ease-in;
}

@keyframes scale-in-out-center {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }

  100% {
    transform: scale(1);
  }
}

/* 遮罩 */
.mask {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 20;
}

.mask-show {
  display: block;
}

.mask-hide {
  display: none;
}

/* 结果 */
.result {
  width: 100%;
  height: 100%;
  background-image: url('http://static_source.yihcm.com/mini_program_divince/result-background.jpg');
  background-size: cover;
  position: absolute;
  top: -100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  animation-duration: .75s;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

/* 结果动画（显示、隐藏） */
.result-animation-show {
  animation-name: back-in-down;
}

.result-animation-hide {
  animation-name: back-out-up;

}

@keyframes back-in-down {
  0% {
    transform: translateY(0%) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateY(100%) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: translateY(100%) scale(1);
    opacity: 1;
  }
}

@keyframes back-out-up {
  0% {
    transform: translateY(100%) scale(1);
    opacity: 1;
  }

  20% {
    transform: translateY(100%) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: translateY(0%) scale(0.7);
    opacity: 0.7;
  }
}

.result-cancel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 21;
}

.result-header {
  margin: 30rpx auto 0;
  padding: 10rpx 20rpx;
  border-radius: 100rpx;
  background: rgba(255, 255, 255, .25);
  font-size: 40rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.result-header-title {
  color: #fff;
}

.result-header-name {
  padding: 5rpx 15rpx;
  font-size: 35rpx;
  color: #000;
  border-radius: 70rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-info {
  width: 650rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.result-info-header {
  width: 650rpx;
  height: 91rpx;
  line-height: 95rpx;
  text-align: center;
  font-size: 30rpx;
  background-image: url('http://static_source.yihcm.com/mini_program_divince/result-info-header.png');
  background-size: cover;
  position: relative;
  z-index: 2;
}

.result-info-inner {
  width: 600rpx;
  height: 700rpx;
  margin: 0 auto 25rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;
  position: relative;
  z-index: 1;
  top: -10rpx;
}

.result-info-item {
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #000;
}

.result-info-item-title {
  padding: 5rpx 30rpx;
  font-size: 40rpx;
  font-weight: 700;
  border-radius: 60rpx;
  background: linear-gradient(to right, #d1fd52, #fff96d);
  position: relative;
  z-index: 2;
}

.result-info-item-text {
  margin-top: 20rpx;
  padding: 40rpx 20rpx;
  background-color: #d9d9d9;
  border-radius: 20rpx;
  position: relative;
  top: -20px;
  z-index: 1;
}